<template>
  <v-container>
    <v-card class="mt-4">
      <v-card-title>
        <span class="headline">词汇难度分级图</span>
      </v-card-title>
      <v-card-subtitle>根据词汇难度分类展示</v-card-subtitle>
      <v-row>
        <v-col cols="12">
          <v-card class="pa-4">
            <div ref="vocabDifficultyChart" style="width: 100%; height: 400px;"></div>
          </v-card>
        </v-col>
      </v-row>
    </v-card>
  </v-container>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "VocabularyDifficultyGrading",
  props: {
    vocabData: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.generateVocabChart(this.vocabData);
  },
  methods: {
    generateVocabChart(data) {
      const chartElement = this.$refs.vocabDifficultyChart;
      const chart = echarts.init(chartElement);

      const option = {
        xAxis: {
          type: 'category',
          data: ['四级', '六级', '考研', 'GRE']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data,
          type: 'bar',
          barWidth: '50%',
          itemStyle: {
            color: '#4A90E2'
          }
        }]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.mt-4 {
  margin-top: 16px;
}
.pa-4 {
  padding: 16px;
}
</style>
